<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 蓝色区域 -->
    <section class="badge-blue">
        <div class="jiant iconfont icon-shangyiyehoutuifanhui"></div>
       <div class="my">
        <div class="m1">我的徽章</div>
        <div class="m2">MY BADGES</div>
       </div>
       <!-- 今日排名 -->
       <div class="day">今日排名</div>
       <!-- 9 -->
       <div class="paiming">9</div>
       <div class="bgc"></div>
    </section>
    <!-- 下面的徽章 -->
    <section class="sect">
        <ul class="secul df">
            <li class="secli ">
                <img src="../../assets/imgs/getbadge01.jpg" >
                <p>连续训练天数</p>
            </li>
            <li class="secli ">
                <img src="../../assets/imgs/getbadge01.jpg" >
                <p>连续训练天数</p>
            </li>
            <li class="secli ">
                <img src="../../assets/imgs/getbadge01.jpg" >
                <p>连续训练天数</p>
            </li>
            <li class="secli ">
                <img src="../../assets/imgs/getbadge01.jpg" >
                <p>连续训练天数</p>
            </li>
        </ul>
    </section>
</body>
</html>